<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>显示格式化后的时间</h2>
      <!-- 1. 计算属性实现 -->
      <h3>现在是{{fmtTime}}</h3>
      <!-- 2. methods实现 -->
      <h3>现在是{{getFmtTime()}}</h3>
      <!-- 插值语法可以使用vm上的所有属性和方法 -->
      <!-- 3. 过滤器实现 -->
      <h3>现在是{{time | timeFormater}}</h3>
      <!-- {{过滤数据 | 过滤器名 }} 将要过滤的数据作为参数传递给过滤器函数 返回值为过滤后的数据 -->
      <!-- 过滤器传参，无需传递要过滤的属性它会默认作为第一个参数进行传递 -->
      <h3>现在是{{time | timeFormater("YYYY_MM_DD")}}</h3>
      <!-- 为过滤器传入参数 -->
      <!-- 使用两个过滤器获取年份 -->
      <h3>现在是{{time | timeFormater("YYYY_MM_DD") | mySlice}}年</h3>

      <!-- 在单向数据绑定时使用过滤器-->
      <h3 :x="msg | mySlice">桑硅谷</h3>
    </div>

    <div id="root2">
      <h2>{{msg | mySlice}}</h2>
      <!--无法使用 root 中的局部过滤器-->
    </div>
  </body>
  <script>
    // 全局过滤器,可以在任意组件中使用
    Vue.filter("mySlice", function (val) {
      return val.slice(0, 4);
    });

    const vm = new Vue({
      el: "#root",
      data() {
        return {
          time: Date.now(), // 生成一个时间戳
          msg: "你好呀hhh",
        };
      },
      // 1.使用给计算属性 + day.js第三方库格式化时间
      computed: {
        fmtTime() {
          return new dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
        },
      },
      // 2. methods 实现
      methods: {
        getFmtTime() {
          return new dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
        },
      },
      // 3. 过滤器实现
      // 局部过滤器
      filters: {
        timeFormater(val, str = "YYYY-MM-DD HH:mm:ss") {
          // 为 str 设置默认参数
          // 过滤器的第一个参数永远为 | 前的要过滤的数据,第二个参数为格式化的形式
          // console.log(val); // time
          return new dayjs(val).format(str);
        },
        /* mySlice(val) {
          // 定义一个只截取字符串前四位的过滤器
          return val.slice(0, 4);
        }, */
      },
    });

    new Vue({
      el: "#root2",
      data: {
        msg: "我是root2",
      },
    });
  </script>
</html>
